<template>
	<view>
		<view class="dangerous-point">
			<view class='content'>
		<scroll-view scroll-y="true" style="height: calc(100vh - 650rpx);"  @scrolltolower="loadMore">
					<view class='danger-item' v-for="(item,index) in list">
						<view class='top'>
							<view class='left'>
								危险点
							</view>
							<view class='right'>
								<view>
									{{item.hazard}}
								</view>
								<view class='right-img'>
									<img src='../../../../static/icon/3.png' alt="1"  v-if="item.isPerformed==1"/>
									<img src='../../../../static/icon/2.png' alt="1"  v-else/>
								</view>
							</view>
						</view>
						<view class='bottom'>

							<view class='left'>
								预控措施
							</view>
							<view class='right'>
								<view>
									{{item.controlMeasure}}
								</view>

							</view>

						</view>
					</view>
				</scroll-view>
			<view class='server-view'>
					<view class='left'>
						<view class='img-c'>
							<img src='../../../../static/icon/19.png' alt="1" />
						</view>
						<view>点击拍照或录像</view>
					</view>
					<view class='right'>
						<view class='img-c'>
							<img src='../../../../static/icon/20.png' alt="1" />
						</view>
						<view>点击开始录音，再点击停止</view>
					</view>
				</view>
					 <button type="primary" class="botton-btn-st" >下一步</button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getDangerPage
	} from '@/api/operationPicket.js'
	export default {
		data() {
			return {
			   current:1,
			   size:10,
			   pages:1,
			   src: '',
			   clickTimes: 0,
			   textRadio: '点击开始录音，再点击停止',
			   list:[]
			}
		},
		props:{
			otId:{
			   type:String
			}
		},
		mounted() {
			this.getDangerList()
		},
		methods: {
           /*
            * 危险点预控
            **/
           getDangerList(){
           	getDangerPage({
           		objId: this.otId,
           		objNo:'OT',
           		current: this.current,
           		size:this.size
           	}).then(res => {
           		this.current++
           		this.list = res.result.records
           		this.pages = res.result.pages
           	})
           },
           // 加载更多
           loadMore(){
           	const {current,pages} = this
           	if(current<=pages) {			
           		this.getDangerList()
           	}
           }
		}
	}
</script>

<style lang="scss">
	.dangerous-point {

		.content {
			box-sizing: border-box;
			color: #333;
			  font-size: 25upx;
			.danger-item {
				background-color: #fff;
				border-radius: 5upx;
				margin-top: 20upx;
				padding-right: 15upx;
				.top {
					display: flex;
					align-items: ctenter;
					width: 100%;

					.left {
						flex: 1;
						padding: 25upx 0;
						border-right: 1px solid#eee;
						border-bottom: 1px solid#eee;
						text-align: center;
					}

					.right {
						flex: 3;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 5upx 0 5upx 25upx;
						border-bottom: 1px solid#eee;

						.right-img {
							text-align: right;
						}

						img {
							width: 25%;
						}

					}
				}

				.bottom {
					display: flex;
					align-items: ctenter;
					width: 100%;

					.left {
						flex: 1;
						padding: 25upx 0;
						border-right: 1px solid#eee;
						text-align: center;
					}

					.right {
						flex: 3;
						padding: 5upx 0 5upx 25upx;
						display: flex;
						align-items: center;

					}
				}

			}
			.server-view{
				display: flex;
				width: 100%;
				color: #999;
				text-align: center;
				position: fixed;
				bottom: 20%;
				left: 0%;
				.left{
					flex:1;
					 img{
					 	width: 50%;
					 }
				}
				.right{
					flex:1.5;
					img{
						width: 33%;
					}
				}
				.img-c{
				}
			}
			.botton-btn-st{
				position: fixed;
				bottom: 20upx;
				width: 90%;
				left: 5%;
			}
		}

	}
</style>
